/*
 * @Author: xuchao 
 * @Date: 2018-05-16 14:10:53 
 * @Last Modified by: xuchao
 * @Last Modified time: 2018-07-03 14:37:15
 */
import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Form, Icon, Input, Button, message } from 'antd';
import { post } from 'axios';
import './style.less';

class Login extends Component {
    constructor(props){
        super(props)
        this.state = {
            type: [{
                className: 'zf',
                name: '政府用户',
                type: 1
            }, {
                className: 'qy',
                name: '企业用户',
                type: 1
            }, {
                className: 'fws',
                name: '服务商用户',
                type: 2
            }, {
                className: 'cs',
                name: '厂商用户',
                type: 3
            }, {
                className: 'gr',
                name: '个人用户',
                type: 4
            }],
            currentIndex: 0,
            currentType: 1,
            show: true
        }
    }

    tabToggle=(index, type)=>{
        this.setState({
            currentIndex: index,
            currentType: type
        })
    }   

    handleSubmit=(e)=>{
        const { currentType } = this.state;
        const that = this;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) { 
                const xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {//服务器返回值的处理函数，此处使用匿名函数进行实现
                    if (xhr.readyState === 4 && xhr.status === 200) {//
                        const res = JSON.parse(xhr.responseText);
                        if(res.code===0){
                            that.setState({
                                show: false
                            }) 
                            post('http://222.92.64.18:8095/login',{
                                "authtype": "FaceID",
                                "username": values.userName
                            }).then((auth) => {
                                if(auth.data.code === 0){
                                    localStorage.setItem('userInfo', JSON.stringify({
                                        username: values.userName,
                                        type: currentType
                                    }));       
                                    that.props.history.push('/');
                                }else{
                                    that.setState({
                                        show: true
                                    }) 
                                    message.error('用户名不存在，请重新输入');
                                }   
                            })                                
                        }else{
                            message.error('用户名或密码错误，请重新输入');
                        }
                    }
                };   
                if(values.userName=='Xcbwgj' || values.userName=='tianjing' || values.userName=='gechen'){     
                    xhr.open('GET','http://safe.gcexe.com/user/login2/?name='+'gc'+'&password='+encodeURIComponent(values.password), true);
                }else{
                    xhr.open('GET','http://safe.gcexe.com/user/login2/?name='+values.userName+'&password='+encodeURIComponent(values.password), true);
                }
                xhr.withCredentials = true;
                xhr.send();
            }
        });
    }
    
    render() {
        const { type, currentIndex, show } = this.state;
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login animated fadeIn">
                <div className="login_bx">
                    <h1>城市信息安全技术公共服务平台</h1>
                    <ul>
                        {
                            type && type.map((item, index) => {
                                return (
                                    <li className={currentIndex===index ? 'active' : ''} onClick={this.tabToggle.bind(this, index, item.type)} key={index}>
                                        <div className="icon">
                                            <i className={item.className}></i>
                                        </div>
                                        <p>{item.name}</p>
                                    </li>
                                )
                            })
                        }
                    </ul>
                    <Form onSubmit={this.handleSubmit.bind(this)} className={
                        show ? `login-form show` : 'login-form hide'
                    }>
                        <Form.Item>
                        {getFieldDecorator('userName', {
                            rules: [{ required: true, message: '请输入用户名!' }],
                        })(
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入用户名" />
                        )}
                        </Form.Item>
                        <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码!' }],
                        })(
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码" />
                        )}
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
                        </Form.Item>
                    </Form> 
                    <Button type="primary" loading style={{margin: '80px 0'}} className={
                        !show ? `login-form show` : 'login-form hide'
                    }>请在手机上进行人脸识别登录</Button>                   
                    <p>
                        <Link to="/register">注册账号</Link>   
                        <Link to="/register">忘记密码？</Link> 
                    </p>
                </div>
            </div>              
        );
    }
}

export default Form.create()(withRouter(Login));